<template>
  <view>
    <view class="uni-add-tips-box">
      <view class="uni-add-tips-content" v-if="top">
        <view class="" v-if="yd">
          <view class="tianjia">添加到我的小程序，回收卡券更方便</view>
          <view class="tyxcx">
            <view class="flexcent">
              <view style="width: 33rpx; margin-right: 18rpx">
                <u-badge bg-color="rgb(64, 156, 249)" value="1"></u-badge>
              </view>
              <view class="">点击右上角更多按钮</view>
            </view>
            <view class="flexcent">
              <view style="width: 33rpx; margin-right: 18rpx">
                <u-badge bg-color="rgb(64, 156, 249)" value="2"></u-badge>
              </view>
              <view class="">选择[添加到我的小程序]</view>
            </view>
            <view class="flexcent">
              <view style="width: 33rpx; margin-right: 18rpx">
                <u-badge bg-color="rgb(64, 156, 249)" value="3"></u-badge>
              </view>
              <view class="">微信首页[下拉]进入浙收卡</view>
            </view>
          </view>
        </view>
        <view class="xichnegx" v-if="showTip">
          <view style="font-size: 12px" class="">添加到我的小程序，下单更便捷</view>
          <view class="btnn" @tap="hideTip">添加</view>
        </view>
        <view v-if="showTip" @click="quxiao" style="margin-bottom: 30rpx; margin-right: 10rpx">
          <u-icon color="#fff" name="close" size="18"></u-icon>
        </view>
      </view>
      <view v-if="yd" class="wozd" @click="wozh"><text>我知道了</text></view>
    </view>
  </view>
</template>

<script>
const SHOW_TIP = 'SHOW_TIP';
export default {
  data() {
    return {
      showTip: false,
      yd: false,
      top: true
    };
  },
  mounted() {
    this.showTip = !uni.getStorageInfoSync().keys.includes(SHOW_TIP);
  },
  props: {
    tip: {
      type: String,
      default: '点击「添加小程序」，下次访问更便捷',
      required: true
    },
    duration: {
      type: Number,
      default: 5,
      required: false
    }
  },
  methods: {
    // 点击x号
    quxiao() {
      this.yd = false;
      this.showTip = false;
      this.top = false;
      // uni.setStorageSync(SHOW_TIP, true);
    },
    wozh() {
      this.showTip = false;
      this.yd = false;
      this.top = false;
    },
    hideTip() {
      this.showTip = false;
      this.yd = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.wozd {
  width: 200rpx;
  margin-top: 40rpx;
  margin-right: 180rpx;
  height: 80rpx;
  text-align: center;
  background-color: #b3b3b3;
  opacity: 0.9;
  border: #fff;
  border-radius: 38.46rpx;
  line-height: 80rpx;
  color: #fff;
}
.xichnegx {
  .btnn {
    padding: 3rpx;
    text-align: center;
    width: 78rpx;
    margin-left: 15rpx;
    border-radius: 38.46rpx;
    // padding: 20rpx;
    background-color: #fff;
    color: #000;
  }
  position: relative;
  font-size: 25rpx;
  display: flex;
  align-items: center;
  margin: 18upx 20upx;
  color: #85c6c6;
}
.tianjia {
  color: #85c6c6;
  margin: 18upx 20upx;
}
.tyxcx {
  .flexcent {
    display: flex;
    align-items: center;
  }
  padding: 18upx 20upx;
  color: #000;
  height: 187rpx;
  border-radius: 12upx;
  background-color: #fff;
}
$themeColor: rgb(39, 39, 53); //主题色
.uni-add-tips-box {
  position: fixed;
  top: CustomBar + 20rpx;
  right: -20rpx;
  z-index: 99999;
  // opacity: 0.8;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
  width: 600upx;
  // animation: opacityC 1s linear infinite;
}
.uni-add-tips-content::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: -38upx;
  right: 105upx;
  border-width: 20upx;
  border-style: solid;
  display: block;
  border-color: transparent transparent $themeColor transparent;
}
.uni-add-tips-content {
  border-width: 0upx;
  margin-top: 20upx;
  position: relative;
  background-color: $themeColor;
  box-shadow: 0 10upx 20upx -10upx $themeColor;
  border-radius: 12upx;
  display: flex;
  align-items: center;
  justify-content: center;
  // padding: 18upx 20upx;
  margin-right: 40upx;
}
.uni-add-tips-content > text {
  color: #fff;
  font-size: 28upx;
  font-weight: 400;
}
@keyframes opacityC {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}
</style>
